<!--
 * @author: 十一
 * @since: 2024-08-26
 * layout-content.vue
 * @desc: new page
-->
<template>
  <a-layout-content >
    <!-- <a-tabs
      v-model:activeKey="activeKey"
      type="editable-card"
      @edit="onEdit"
      hide-add
    >
      <a-tab-pane
        v-for="pane in panes"
        :key="pane.key"
        :tab="pane.title"
        :closable="pane.closable"
      ></a-tab-pane>
    </a-tabs> -->
    <div class="layout-container">
      <RouterView />
    </div>
  </a-layout-content>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// const panes = ref<
//   { title: string; content: string; key: string; closable?: boolean }[]
// >([
//   { title: "首页", content: "Content of Tab 1", key: "1", closable: false },
//   { title: "Tab 2222", content: "Content of Tab 2", key: "2" },
//   {
//     title: "Tab 33333",
//     content: "Content of Tab 3",
//     key: "3",
//   },
// ]);

// const activeKey = ref(panes.value[0].key);
// const remove = (targetKey: string) => {
//   let lastIndex = 0;
//   panes.value.forEach((pane, i) => {
//     if (pane.key === targetKey) {
//       lastIndex = i - 1;
//     }
//   });
//   panes.value = panes.value.filter((pane) => pane.key !== targetKey);
//   if (panes.value.length && activeKey.value === targetKey) {
//     if (lastIndex >= 0) {
//       activeKey.value = panes.value[lastIndex].key;
//     } else {
//       activeKey.value = panes.value[0].key;
//     }
//   }
// };
// const onEdit = (targetKey: string | MouseEvent) => {
//   remove(targetKey as string);
// };
</script>

<style scoped>
.layout-container {
  height: calc(100vh - 147px);
  minheight: "360px";
  margin: 10px;
  margin-bottom: 0;
  overflow: auto;
}
/deep/ .ant-tabs-nav-wrap {
  /* background: #ffffff; */
  margin-top: 1px;
  /* padding: 0 16px; */
}
/deep/ .ant-tabs-nav .ant-tabs-tab {
  border: none;
  /* border-bottom: 2px solid #ffffff; */
  border-radius: 0px;
  background: none;
  /* color: #afafaf !important; */
}
/deep/ .ant-tabs-tab-active {
  border-bottom: 2px solid #1677ff !important;
}
/deep/ .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #1677ff !important;
}
/deep/ .anticon {
  vertical-align: 1px;
}
</style>
